<template>
  <div class="jiaoseList">
    <el-dialog :title="id" :visible.sync="dialogTableVisible" destroy-on-close style="height: 600px" @close="cls">
      <el-form v-if="this.type==='bianji'" ref="form" :model="form" :rules="rules">
        <el-form-item label="角色名称" prop="username">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="userID">
          <el-input v-model="form.userID" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-form v-else-if="type==='tianjia'" ref="form" :model="form" :rules="rules">
        <el-form-item label="角色名称" prop="username">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="userID">
          <el-input v-model="form.userID" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div v-else>
        {{ id }}
        <el-tree
          ref="tree"
          :data="data"
          :default-checked-keys="defaultKeys"
          :props="defaultProps"
          default-expand-all
          highlight-current
          node-key="id"
          show-checkbox
        >
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="res">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-button class="button" type="primary" @click="addUser('tianjia')">添加角色</el-button>
      <el-table
        :data="tableData"
        border
        stripe
      >
        <el-table-column type="expand">
          <template #default="{row}">
            <el-row v-for="(item1,i1) in row.children" :key="item1.id"
                    :class="['bdbottom',i1 === 0?'bdtop':'']">
              <!--  //渲染一级权限-->
              <el-col :span="5">
                <el-tag closable @close="delTag(row,item1.id)">{{ item1.authName }}</el-tag>
                <i class="el-icon-caret-right"></i>
              </el-col>
              <!-- //渲染二级权限-->
              <el-col :span="19">
                <!--  通过for循环且套所有的二级权限-->
                <el-row v-for="(item2,i2) in item1.children" :key="item2.id"
                        :class="[i2===0?'':'bdtop']">
                  <el-col :span="6">
                    <el-tag closable type="success" @close="delTag(row,item2.id)">{{ item2.authName }}</el-tag>
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                  <!-- //渲染三级权限-->
                  <el-col :span="18" class="col3">
                    <el-row v-for="(item3) in item2.children" :key="item3.id">
                      <el-col>
                        <el-tag closable type="warning" @close="delTag(row,item3.id)">{{ item3.authName }}</el-tag>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column
          type="index"
        ></el-table-column>
        <el-table-column
          label="角色名称"
          prop="roleName"
        ></el-table-column>
        <el-table-column
          label="角色描述"
          prop="roleDesc"
        ></el-table-column>
        <el-table-column
          label="操作"
        >
          <template #default="{row}">
            <el-button circle icon="el-icon-edit" type="primary" @click="djShijian(row,'bianji')"></el-button>
            <el-button circle icon="el-icon-delete-solid" type="primary" @click="djShijian(row,'shanchu')"></el-button>
            <el-button circle icon="el-icon-setting" type="primary" @click="djShijian(row,'fenpei')"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { fenPeiUser } from '@/api/user'
import { addUser, delJiaoseId, editOneroles, getOneroles, delOneUser, getTrees, editTrees } from '@/api/roles'

export default {
  name: 'hm-jiaose',
  created () {
    this.getRoles()
  },
  computed: {
    id () {
      if (this.type === 'tianjia') return '添加用户'
      if (this.type === 'bianji') return '修改用户'
      if (this.type === 'fenpei') return '分配用户'
      return '添加用户'
    }
  },
  data () {
    return {
      defaultKeys: [],
      data: [],
      tableData: [],
      dialogTableVisible: false,
      form: {
        username: '',
        userID: ''
      },
      defaultProps: {
        children: 'children',
        label: 'authName'
      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 10,
            trigger: 'blur'
          }
        ],
        userID: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 10,
            trigger: 'blur'
          }
        ]
      },
      type: ''
    }
  },
  methods: {
    // 修改勾选框
    cls () {
      this.defaultKeys = []
    },
    // 获得三级节点
    getThreeChildren (row, arr) {
      if (!row.children) {
        return arr.push(row.id)
      }
      row.children.forEach(item => {
        this.getThreeChildren(item, arr)
      })
    },
    sb () {
      this.dialogTableVisible = false
      this.getRoles()
    },
    // 三个button按钮哪里
    async djShijian (row, type) {
      console.log(row)
      this.type = type
      this.id2 = row.id
      if (this.type === 'bianji') {
        this.dialogTableVisible = true
        const res = await getOneroles(row.id)
        this.form.username = res.data.roleName
        this.form.userID = res.data.roleDesc
      }
      if (this.type === 'shanchu') {
        console.log(row.id)
        await delOneUser(row.id)
        this.$message.success('删除成功')
        this.sb()
      }
      if (this.type === 'fenpei') {
        const res = await getTrees()
        this.data = res.data
        this.dialogTableVisible = true
      }
      this.getThreeChildren(row, this.defaultKeys)
    },
    async delTag (row, id) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await delJiaoseId(row.id, id)
        this.$message.success('操作成功')
        this.getRoles()
      } catch (e) {
        this.$message('取消了操作')
      }
    },
    addUser (type) {
      this.type = type
      this.dialogTableVisible = true
      this.form.userID = ''
      this.form.username = ''
    },
    res () {
      this.dialogTableVisible = false
      this.$refs.form.resetFields()
    },
    // 取消确认按钮
    async add () {
      if (this.type === 'bianji') {
        await this.$refs.form.validate()
        await editOneroles(this.id2, {
          roleName: this.form.username,
          roleDesc: this.form.userID
        })
        this.sb()
      }
      if (this.type === 'tianjia') {
        await addUser({
          roleName: this.form.username,
          roleDesc: this.form.userID
        })
        this.sb()
      }
      if (this.type === 'fenpei') {
        const keys = [...this.$refs.tree.getCheckedKeys(), ...this.$refs.tree.getHalfCheckedKeys()]
        const idStr = keys.join(',')
        const res = await editTrees(this.id2, idStr)
        if (res.meta.status === 200) {
          this.$message.success(res.meta.msg)
        } else {
          this.$message.error(res.meta.msg)
        }
        this.sb()
      }
    },
    async getRoles () {
      const res = await fenPeiUser()
      this.tableData = res.data
    }
  }
}
</script>

<style lang="scss" scoped>
.bdtop {
  border-top: 1px solid #ccc;
}

.bdbottom {
  border-bottom: 1px solid #ccc;
}

.jiaoseList {
  .button {
    float: left;

  }

  .el-row {
    display: flex;
    align-items: center;
    justify-content: space-around;

    .col3 {
      display: flex;
    }
  }

  .el-tag {
    margin: 7px;
  }
}

</style>
